<template>
  <!-- <a-spin :spinning="spinning" size="large"> -->
  <div
    class="couple-result"
    ref="imageDom"
    :style="{
      width: modelWidth == '320' ? pageWidth : pageWidthPc,
      height: modelWidth == '320' ? pageHeight : pageHeightPc,
      transform:
        modelWidth == '320'
          ? 'translate3d(-50%,-50%,0) rotate(' + rotate + ')'
          : '',
    }"
  >
    <div class="left-result" v-if="personData && personData.second">
      <div
        class="f-name"
        v-for="(item, index) in onStringSplit(personData.second.familyName)"
        :key="'Split' + index"
      >
        {{ item }}
      </div>
      <div class="des-box">
        <div class="f-info">
          <div class="tit"><i></i>姓氏介绍</div>
          <div class="content">
            <p v-if="personData.second.familyNameDescription">
              {{ personData.second.familyNameDescription }}
            </p>
            <p v-else>数据暂未收录</p>
          </div>
        </div>
        <div class="f-info">
          <div class="tit"><i></i>家规家训</div>
          <div class="content">
            <p v-if="personData.second.roleContent">
              {{ personData.second.roleContent }}
            </p>
            <p v-else>数据暂未收录</p>
            <!-- <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p> -->
          </div>
        </div>
      </div>
    </div>

    <div
      class="heart-box"
      v-if="personData && personData.first && personData.second"
    >
      <img src="../../assets/img/cp.png" hspace="5" vspace="5" />
      <div class="name1" v-if="personData && personData.second">
        {{ personData.second.familyName }}{{ personData.second.realName }}
      </div>
      <div class="name2" v-if="personData && personData.first">
        {{ personData.first.familyName }}{{ personData.first.realName }}
      </div>
      <div class="date">
        <p
          class="create-date-chs"
          v-if="personData && personData.createDateChs"
        >
          {{ personData.createDateChs }}
        </p>
        <p class="create-date" v-if="personData && personData.createDate">
          {{ personData.createDate.replace(/-/g, ".") }}
        </p>
      </div>
    </div>

    <div class="right-result" v-if="personData && personData.first">
      <!-- <div class="f-name">{{personData.first.familyName}}</div> -->
      <div
        class="f-name"
        v-for="(item, index) in onStringSplit(
          personData.first.familyName,
          true
        )"
        :key="'Split' + index"
      >
        {{ item }}
      </div>
      <div class="des-box">
        <div class="f-info">
          <div class="tit">姓氏介绍<i></i></div>
          <div class="content">
            <p v-if="personData.first.familyNameDescription">
              {{ personData.first.familyNameDescription }}
            </p>
            <p v-else>数据暂未收录</p>
          </div>
        </div>
        <div class="f-info">
          <div class="tit">家规家训<i></i></div>
          <div class="content">
            <p v-if="personData.first.roleContent">
              {{ personData.first.roleContent }}
            </p>
            <p v-else>数据暂未收录</p>
            <!-- <p>一、愛人者人恆愛之，敬人者人恆敬之。我惡人人亦惡我，我慢人人亦慢我，此感應自然之理。切不可結怨於人，結怨於人辟如服毒，其毒日久必發，但有小大遲速不同耳。人家祖宗受人欺侮，其子孫傳説不忘，乘時遘會，終須報之。彼我同然，出爾反爾，豈可不戒也？</p>
                        <p>二、臨事讓人一步自有餘地，臨財放寬一分自有餘味。待人接物要看自己地步，若自己勝人一分，切宜自下一分，使不得一毫氣概。若自己遜人一分，切宜自重一分，使不得一毫諂侫。</p>
                        <p>板村蔡氏义派支譜</p> -->
          </div>
        </div>
      </div>
    </div>

    <router-link to="/" class="go-home download" id="go-home">首页</router-link>
    <a href="javascript:" class="download displayNone" @click="download"
      >下载</a
    >
    <div class="btm">
      <img :src="logo" alt="" class="logo" />
      <img :src="mzlogo" alt="" class="mzlogo" />
      <a :href="qriously2" class="a1">点击了解更多</a>
      <a :href="qriously1" class="a2">点击了解更多</a>
      <!-- background="#fff" :backgroundAlpha="1" foreground="#f00" 背景色 -->
      <qriously :value="qriously2" :size="100" class="qrcode1" />
      <qriously :value="qriously1" :size="100" class="qrcode2" />

      <!-- 二维码弹出框 -->
      <a-modal
        v-model="qrVisible"
        :footer="null"
        :mask="false"
        :width="modelWidth"
        transitionName="fade"
      >
        <img :src="qriouslySrc2" class="qrcodeModal" />
        <img :src="qriouslySrc1" class="qrcodeModal" />
      </a-modal>

      <!-- 长按图片操作层 -->
      <a-modal
        v-model="downloadVisible"
        :footer="null"
        :mask="true"
        :width="modelWidth"
        dialogClass="ant-image"
      >
        <h5>长按图片进行更多操作</h5>
        <img :src="downloadImageSrc" class="downloadImageModal" />
      </a-modal>
    </div>
  </div>
  <!-- </a-spin> -->
</template>

<script>
export default {
  data() {
    return {
      spinning: false, // 加载中...
      qrVisible: false,
      downloadVisible: false, // 长按图片遮罩
      pageWidth: "",
      pageHeight: "",
      pageWidthPc: "",
      pageHeightPc: "",
      rotate: "0deg",
      familyName1: "",
      name1: "",
      familyName2: "",
      name2: "",
      createDate: "",
      personData: null, // 人物信息
      qrCode: require("./../../assets/img/qr.png"),
      logo: require("./../../assets/img/logo3.png"),
      mzlogo: require("./../../assets/img/mzlogo.png"),
      qrcodeUrl: "https://jiapu.library.sh.cn/#/genealogyCenter?familyName=",
      qriouslySrc1: "",
      qriouslySrc2: "",
      downloadImageSrc: "", // 下载时图片
      downScrollX: 0, // 图片截取x轴位置
      downScrollY: 0, // 图片截取y轴位置
      modelWidth: "320",
    };
  },
  computed: {
    params() {
      return {
        familyName1: this.familyName1,
        name1: this.name1,
        familyName2: this.familyName2,
        name2: this.name2,
        createDate: this.createDate,
      };
    },
    qriously1() {
      return this.qrcodeUrl + encodeURIComponent(this.familyName1);
    },
    qriously2() {
      return this.qrcodeUrl + encodeURIComponent(this.familyName2);
    },
  },
  created() {
    this.init();
    window.onresize = () => {
      this.init();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getPersonRoles();
      this.onQRCodeImg1(); // 第一个二维码生成
      this.onQRCodeImg2(); // 第二个二维码生成
      setTimeout(() => {
        this.onQrcode(); // 底部二维码点击
      }, 600);
    });
  },
  methods: {
    init() {
      const fw =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      const fh =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      fw > 1100 ? (this.modelWidth = "75%") : (this.modelWidth = "320");
      this.pageWidthPc = fw + "px";
      this.pageHeightPc = fh + "px";
      if (fw < fh) {
        this.pageWidth = fh + "px";
        this.pageHeight = fw + "px";
        this.rotate = "90deg";
      } else {
        this.pageWidth = fw + "px";
        this.pageHeight = fh + "px";
        this.rotate = "0deg";
      }
    },
    onQrcode() {
      // 底部二维码点击
      this.$Jquery(".qrcode1 canvas, .qrcode2 canvas").click(() => {
        this.qrVisible = true;
      });
    },
    onQRCodeImg1() {
      // 第一个二维码生成
      this.$QRCode
        .toDataURL(this.qriously1)
        .then((url) => {
          this.qriouslySrc1 = url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    onQRCodeImg2() {
      // 第二个二维码生成
      this.$QRCode
        .toDataURL(this.qriously2)
        .then((url) => {
          this.qriouslySrc2 = url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getRouterParmas() {
      let routerParmas = null;
      let _query = this.$route.query;
      if (
        !this.isEmptyObject(_query) &&
        !this.isEmpty(_query.tipsCoupleParams)
      ) {
        // routerParmas = JSON.parse(decodeURIComponent(_query.tipsCoupleParams));
        routerParmas = JSON.parse(_query.tipsCoupleParams);
      } else {
        routerParmas = JSON.parse(localStorage.tipsCoupleParams);
      }
      return routerParmas;
    },
    getPersonRoles() {
      let _routerParmas = this.getRouterParmas();
      this.familyName1 = _routerParmas.familyName1;
      this.name1 = _routerParmas.name1;
      this.familyName2 = _routerParmas.familyName2;
      this.name2 = _routerParmas.name2;
      this.createDate = _routerParmas.createDate;
      this.$axios
        .get(this.$Common.getRoles, { params: this.params })
        .then((res) => {
          let resultData = res.data;
          // console.log(resultData);
          this.personData = resultData.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    download() {
      this.spinning = true; // 加载中...
      if (this.hasScrollbar(".des-box")) {
        this.pageWidth = Number(this.pageWidth.replace("px", "")) * 1.5 + "px";
        this.pageHeight =
          Number(this.pageHeight.replace("px", "")) * 1.5 + "px";
        this.pageWidthPc =
          Number(this.pageWidthPc.replace("px", "")) * 1.2 + "px";
        this.pageHeightPc =
          Number(this.pageHeightPc.replace("px", "")) * 1.2 + "px";
        this.downScrollX = this.$refs.imageDom.offsetLeft / 2;
        this.downScrollY = this.$refs.imageDom.offsetTop / 2;
      }
      this.$nextTick(() => {
        this.$Html2canvas(this.$refs.imageDom, {
          x: 0, // 截取画布x轴坐标
          y: 0, // 截取画布y轴坐标
          scrollX: this.downScrollX,
          scrollY: this.downScrollY,
          // dpi: window.devicePixelRatio,
          scale: window.devicePixelRatio,
          taintTest: true,
          allowTaint: true,
          useCORS: true,
          ignoreElements: (element) => {
            if (element.className == "download" || element.id == "go-home")
              return true;
          },
        })
          .then((canvas) => {
            this.downloadVisible = true;
            this.downloadImageSrc = canvas.toDataURL("image/png", 0.92);
            // this.downloadIamge(canvas.toDataURL('image/png', 1), 'codeImg.png');
            this.spinning = false; // 加载中...
          })
          .catch((error) => {
            this.$mui.toast("图片下载异常!");
            console.error("图片下载异常!", error);
          });
        this.init(); // 样式初始化
      });
    },
    downloadIamge(canvas, name) {
      var alink = document.createElement("a");
      alink.download = name;
      alink.href = canvas;
      alink.target = "_blank";
      if (document.createEvent) {
        let clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", true, true);
        alink.dispatchEvent(clickEvent);
      } else alink.click();
    },
  },
};
</script>

<style>
.ant-spin-nested-loading > div > .ant-spin-lg .ant-spin-dot {
  margin: 47vh -16px;
}
</style>
<style lang="less" scoped>
// 文字无法再缩小问题，
// 注意：如果使用了这个属性，浏览器的字体将不能使用放大缩小功能！
// （就是按住CTRL键上下滚动鼠标中键的那功能）
// *{-webkit-text-size-adjust: none!important;}

/deep/.ant-modal-content {
  background-color: rgba(255, 255, 255, 0.9);
}
/deep/.ant-modal-body {
  text-align: center;
  .qrcodeModal {
    display: inline-block;
    margin: 0 5%;
  }
  img {
    width: 38%;
    &.downloadImageModal {
      width: 100%;
    }
  }
}
@media screen and (orientation: portrait) {
  /deep/.ant-modal {
    transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important; /* IE 9 */
    -moz-transform: rotate(90deg) !important; /* Firefox */
    -webkit-transform: rotate(90deg) !important; /* Safari 和 Chrome */
    -o-transform: rotate(90deg) !important; /* Opera */
    transform-origin: 25% 50% !important;
  }
  /deep/.ant-image {
    transform: none !important;
    -ms-transform: none !important; /* IE 9 */
    -moz-transform: none !important; /* Firefox */
    -webkit-transform: none !important; /* Safari 和 Chrome */
    -o-transform: none !important; /* Opera */
  }
}
/deep/.qrcode1 {
  float: left;
  width: 0.6rem;
  height: 0.6rem;
  line-height: 1.6rem;
  text-align: center;
  canvas {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -o-transform: rotate(50deg);
  }
}
/deep/.qrcode2 {
  float: right;
  width: 0.6rem;
  height: 0.6rem;
  line-height: 1.6rem;
  text-align: center;
  canvas {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -webkit-transform: rotate(50deg);
    -o-transform: rotate(50deg);
  }
}

// @media screen and (max-height: 630px){
// 	.couple-result {
// 		.heart-box{
// 			.date{
// 				top: 9%;
// 			}
// 		}
// 	}
// }

.couple-result {
  .f-name {
    top: 0.2rem !important;
    line-height: 1.8rem;
    display: inline-block;
    margin: 0 0.5px;
  }
  .tit {
    font-weight: 600 !important;
  }
  .content {
    p {
      color: #fff !important;
    }
  }
  .heart-box {
    height: 80%;
    .name1 {
      height: initial;
      top: 18vw;
      left: 2.2rem;
    }
    .name2 {
      height: initial;
      top: 18vw;
      right: 2.25rem;
    }
    .date {
      // width: 100%;
      // line-height: 16px;
      position: relative;
      // left: 3px;
      // top: .18rem;
      // bottom: 4vh;
      // margin: 0% auto;
      padding: 0 0.2rem;
      text-align: center;
      // transform: scale(0.5) rotate(90deg) translate(-50%, 0%);
      // -ms-transform: scale(0.5) rotate(90deg) translate(-50%, 0%);    /* IE 9 */
      // -moz-transform: scale(0.5) rotate(90deg) translate(-50%, 0%);   /* Firefox */
      // -webkit-transform: scale(0.5) rotate(90deg) translate(-50%, 0%);/* Safari 和 Chrome */
      // -o-transform: scale(0.5) rotate(90deg) translate(-50%, 0%);     /* Opera */

      transform: scale(0.5) translate(42%, -160%);
      -ms-transform: scale(0.5) translate(42%, -160%); /* IE 9 */
      -moz-transform: scale(0.5) translate(42%, -160%); /* Firefox */
      -webkit-transform: scale(0.5) translate(42%, -160%); /* Safari 和 Chrome */
      -o-transform: scale(0.5) translate(42%, -160%); /* Opera */
      p {
        position: relative;
        padding: 0;
        margin: 0;
        // width: 5rem;
        &.create-date-chs {
          width: 10px;
          left: 20px;
          // line-height: 100%;
          // transform: rotate(-90deg) translate(0%,100%);
          // -ms-transform: rotate(-90deg) translate(0%,100%);     /* IE 9 */
          // -moz-transform: rotate(-90deg) translate(0%,100%);    /* Firefox */
          // -webkit-transform: rotate(-90deg) translate(0%,100%); /* Safari 和 Chrome */
          // -o-transform: rotate(-90deg) translate(0%,100%);     	/* Opera */
        }
        &.create-date {
          // margin-top: -46px;
          // right: 50%;
          // transform: translate(0%,-300%);
          // -ms-transform: translate(0%,-300%);     	/* IE 9 */
          // -moz-transform: translate(0%,-300%);    	/* Firefox */
          // -webkit-transform: translate(0%,-300%); 	/* Safari 和 Chrome */
          // -o-transform: translate(0%,-300%); 	 	/* Opera */

          float: left;
          margin: 0% auto;
          transform: rotate(90deg) translate(-90%, 100%);
          -ms-transform: rotate(90deg) translate(-90%, 100%); /* IE 9 */
          -moz-transform: rotate(90deg) translate(-90%, 100%); /* Firefox */
          -webkit-transform: rotate(90deg) translate(-90%, 270%); /* Safari 和 Chrome */
          -o-transform: rotate(90deg) translate(-90%, 100%); /* Opera */
        }
      }
    }
  }
  .btm {
    padding: 0 0.27rem;
  }
  .go-home {
    right: 4.3rem;
  }
}

// pc样式
@media screen and (min-width: 1100px) {
  .couple-result {
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("../../assets/img/cpbg_pc.jpg");
    color: #fff;
    padding: 0.67rem 1.16rem 0;

    // 截屏样式
    &.box-sty {
      .left-result,
      .right-result {
        .des-box {
          .f-info {
            margin-bottom: 0;
            transform: scale(0.8) translate(-65px, 0px);
            width: 123%;
          }
        }
      }
    }

    .heart-box {
      position: absolute;
      color: #7f4f21;
      font-size: 12px;
      line-height: 1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;

      img {
        width: 10rem;
        display: none;
      }

      .date {
        position: absolute;
        top: 73%;
        right: 46.5%;
        font-weight: bold;

        p {
          word-break: break-all;
          color: #7f4f21;

          &.create-date-chs {
            width: 0.2rem;
            left: 0.26rem;
            font-size: 0.22rem;
            line-height: 1.2;
          }

          &.create-date {
            font-size: 0.22rem;
          }

          &:last-child {
            top: 40%;
          }
        }
      }

      .name1 {
        position: absolute;
        width: 0.3rem;
        height: 1.1rem;
        top: 22%;
        left: 40.4%;
        text-align: center;
        font-size: 0.2rem;
        line-height: 1.1;
      }

      .name2 {
        position: absolute;
        width: 0.3rem;
        height: 1.1rem;
        top: 22%;
        right: 41.4%;
        text-align: center;
        font-size: 0.2rem;
        line-height: 1.1;
      }
    }

    .download {
      width: 1.4rem;
      height: 0.32rem;
      line-height: 0.3rem;
      font-size: 0.16rem;
      bottom: 0.59rem;
      right: 6.11rem;
    }

    .go-home {
      right: 7.9rem;
    }

    .left-result,
    .right-result {
      width: 26%;

      .des-box {
        .f-info {
          margin-bottom: 0.3rem;

          &:last-child {
            margin-bottom: 0;
          }

          .content {
            color: #fff;
            line-height: 1.8;
            padding-left: 0.35rem;

            p {
              font-size: 16px;
            }
          }

          .tit {
            font-size: 0.2rem;
            color: #fab45a;
          }

          i {
            width: 0.24rem;
            height: 0.24rem;
            margin-left: 0;
            margin-right: 0.11rem;
          }
        }
      }

      .f-name {
        width: 0.9rem;
        height: 0.9rem;
        line-height: 0.8rem;
        color: #fab45a;
        font-size: 0.65rem;
      }
    }

    .right-result {
      .des-box {
        .f-info {
          .tit {
            justify-content: flex-end;
            flex-direction: row-reverse;

            i {
              margin-left: 0;
              margin-right: 0.11rem;
            }
          }
        }
      }
    }

    .btm {
      width: 8.8rem;
      height: 1.85rem;
      left: 50%;
      margin-left: -4.4rem;
      bottom: 1.2rem;
      padding: 0;

      a {
        color: #f2b059;
        bottom: -0.23rem;

        &.a1 {
          left: -2.8rem;
        }

        &.a2 {
          right: -5.73rem;
        }
      }

      .qrcode1 {
        position: absolute;
        top: 0.63rem;
        left: 0.766rem;
        transform: scale(1.3) rotate(85deg);
      }

      .qrcode2 {
        position: absolute;
        top: 0.63rem;
        right: 0.07rem;
        transform: scale(1.3) rotate(85deg);
      }

      img {
        &.logo {
          width: 2rem;
          height: 0.9rem;
          left: 2.4rem;
          top: 0.7rem;
        }

        &.mzlogo {
          width: 1.1rem;
          height: 1.3rem;
          left: 5.3rem;
          top: 0.4rem;
        }

        &.qr2 {
          transform: rotate(45deg) scale(0.8);
          right: 0.23rem;
          top: 0.43rem;
        }

        &.qr1 {
          transform: rotate(45deg) scale(0.8);
          left: 0.28rem;
          top: 0.43rem;
        }
      }
    }
  }
}
@media screen and (min-width: 980px) and (max-width: 1100px) {
  .couple-result {
    .heart-box {
      transform: rotate(-90deg);
      position: absolute;
      left: 86px;
      top: 100px;

      .date {
        padding: 0 0.5rem;

        p {
          font-size: 36px;
        }
      }
    }
    .left-result,
    .right-result {
      transform: rotate(-90deg);
      position: absolute;
      top: 20vh;
      left: 28vh;
      width: 70vw;
      height: 20vh;
      overflow: auto;

      .des-box {
        position: inherit;
        top: 1.5rem;
        right: 0;
        bottom: 0;
        left: 0;
        .f-info {
          margin-bottom: 0.3rem;

          &:last-child {
            margin-bottom: 0;
          }

          .content {
            color: #fff;
            line-height: 1.8;
            padding-left: 0.35rem;

            p {
              font-size: 16px;
            }
          }

          .tit {
            font-size: 0.3rem;
            color: #fab45a;

            i {
              width: 0.4rem;
              height: 0.4rem;
              margin-left: 0;
              margin-right: 0.11rem;
            }
          }
        }
      }

      .f-name {
        width: 0.9rem;
        height: 0.9rem;
        line-height: 0.8rem;
        color: #fab45a;
        font-size: 0.65rem;
      }
    }

    .right-result {
      left: 50vh;

      .f-name {
        float: left;
        left: 0;
      }
      .des-box {
        .f-info {
          .tit {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
          }
        }
      }
    }

    .btm {
      transform: rotate(-90deg);
      bottom: 45%;
      left: 94%;
      padding: 0 0.25rem;

      .qrcode1 {
        transform: rotate(-5deg);
        line-height: 1.98rem;
      }
      .qrcode2 {
        transform: rotate(-4deg);
        line-height: 1.98rem;
      }
    }

    .go-home {
      transform: rotate(-90deg);
      font-size: 20px;
      height: 0.8rem;
      line-height: 0.7rem;
      right: 1.8rem !important;
      bottom: 11.5rem;
    }
    .displayNone {
      display: none;
    }
  }
}
</style>